<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 活动中心</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
            <el-select v-model="select_cate" placeholder="筛选分类" class="handle-select mr10">
                <el-option label="全部分类" value="0"></el-option>
                <el-option v-for="(type_item,index) in typeCenter" :key="index" :label="type_item.a_type_name" :value="type_item.a_tid"></el-option>
            </el-select>
            <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="search" @click="getData">搜索</el-button>
        </div>
        <el-table :data="newsCenter" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="a_title" label="标题" >
            </el-table-column>
            <el-table-column prop="a_type_name" label="分类"  width="120">
            </el-table-column>
                  <el-table-column prop="a_publish_time"  sortable  label="发布时间"  :formatter="time_filter" width="150">
            </el-table-column>
             <el-table-column prop="a_state"   :formatter="publish_formatter"  label="发布" width="120">
            </el-table-column>
         
            <el-table-column label="操作" width="250" >
                <template scope="scope">
                     <el-button size="small" :type="scope.row.a_top>0?'info':'warning'"
                            @click="handleInTop(scope.row)" v-text="scope.row.a_top>0?'取消置顶':'置顶'"></el-button>
                    <el-button size="small"
                            @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="all_page">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import * as rpConfig from '../../../rpConfig/constant'
import { HttpReq } from '../../service/server'
var Server = new HttpReq()
export default {
    data() {
        return {
            url: './static/vuetable.json',
            newsCenter: [],
            typeCenter: [],
            cur_page: 1,
            all_page: 1,
            multipleSelection: [],
            select_cate: '',
            select_word: '',
            del_list: [],
            is_search: false
        }
    },
    created() {
        this.getData()
        this.getType()
    },
    computed: {},
    methods: {
        handleCurrentChange(val) {
            this.cur_page = val
            this.getData()
        },
        getData() {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/newscenter.Index/getNewsByCon',
                {
                    page: self.cur_page,
                    a_type_id: self.select_cate,
                    keyword: self.select_word
                },
                function(res) {
                    self.newsCenter = res.data.data
                    self.all_page = Math.ceil(res.data.num / res.data.pagesize) * 10
                }
            )
        },
        getType() {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/newscenter.Index/getNewsType',
                {},
                function(response) {
                    self.typeCenter = response.data
                }
            )
        },
        time_filter(row) {
            return row.a_publish_time.substring(0, 16)
        },
        publish_formatter(row) {
            return row.a_state == 1 ? '上线内容' : '草稿'
        },
        filterTag(value, row) {
            return row.tag === value
        },
        handleEdit(row) {
            this.$router.push('/newsedit/' + row.a_id)
            //this.$message('编辑第' + (index + 1) + '行')
        },
        handleInTop(row) {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/newscenter.Index/setInTop',
                { item_id: row.a_id, a_top: row.a_top },
                function(response) {
                    self.$message.success(response.msg)
                    self.getData()
                }
            )
        },
        handleDelete(row) {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/newscenter.Index/deleteNewsItem',
                { item_id: [row.a_id] },
                function(response) {
                    self.$message.success(response.msg)
                    self.getData()
                }
            )
        },
        delAll() {
            const self = this,
                length = self.multipleSelection.length
            let delArr = []
            for (let i = 0; i < length; i++) {
                delArr.push(self.multipleSelection[i].a_id)
            }
            if (delArr.length == 0) {
                self.$message.info('请选择要删除的记录')
            } else {
                Server._POST(
                    rpConfig.API_URI + '/newscenter.Index/deleteNewsItem',
                    { item_id: delArr },
                    function(response) {
                        self.$message.success(response.msg)
                        self.getData()
                    }
                )
            }

            self.multipleSelection = []
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        }
    }
}
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
</style>